<script setup lang="ts">
import api from '@/api'
import * as echarts from 'echarts'
import { ref, onMounted, reactive } from 'vue'
import { getTotalReport } from './factor.js'
import { totalScore } from './echarts.js'
import { ElButton, ElRate, ElIcon } from 'element-plus'
import { Printer } from '@element-plus/icons-vue'
import htmlToPdf from '@/utils/exportPDF'
import './reportStyle.css'
import profileChart from './profileChart.js'
import typeChart from './typeChart.js'

const props = defineProps({
    currentRow: {
        type: Object,
        default: () => null
    },
    showDownload: {
        type: Boolean,
        default: () => false
    }
})
const { getTestById } = api
const report = ref({})
const star = ref(3)
const exportPDF = async () => {
    //    htmlToPdf.getPdf(student.value.name + '的评测报告', '#exportDiv')
}
const itemColor = {
    '1': '#EC5E5A',
    '2': '#F7B04A',
    '3': '#50A9B2',
    '4': '#117901'
}

const getItemName = (level, levelName) => {
    var color = '117901'
    if (level == 1) color = 'EC5E5A'
    else if (level == 2) color = 'FA9F49'
    else if (level == 3) color = '50A9B2'
    return "<span style='color:#" + color + "'>" + levelName + '</span>'
}
const isMobile = () => {
    // 判断是否为移动设备
    return (
        typeof window.orientation !== 'undefined' || // 判断是否存在window.orientation属性，此属性在移动设备上一般存在
        navigator.userAgent.indexOf('IEMobile') !== -1 || // 判断是否为Windows Phone
        navigator.userAgent.indexOf('iPhone') !== -1 || // 判断是否为iPhone
        (navigator.userAgent.indexOf('Android') !== -1 &&
            navigator.userAgent.indexOf('Mobile') !== -1) || // 判断是否为Android手机
        navigator.userAgent.indexOf('BlackBerry') !== -1 || // 判断是否为BlackBerry
        navigator.userAgent.indexOf('Opera Mini') !== -1 // 判断是否为Opera Mini浏览器
    )
}
onMounted(() => {
    profileChart('profileChart', props.currentRow, echarts)
    typeChart('typeChart1', props.currentRow, [1, 2, 3], echarts)
    typeChart('typeChart2', props.currentRow, [4, 5, 6], echarts)
    typeChart('typeChart3', props.currentRow, [7, 8, 9], echarts)
})
const printReport = ref({
    id: 'exportDiv',
    preview: false,
    zIndex: 200000,
    clickMounted() {
        console.log('打印')
    }
})
const printButton = ref(null)
</script>
<template>
    <div class="root" id="root">
        <div class="no-print" v-if="!isMobile()">
            <div class="print-button">
                <ElButton ref="printButton" type="default" v-print="printReport"
                    ><ElIcon size="20px"><Printer /></ElIcon
                ></ElButton>
            </div>
        </div>
        <div id="exportDiv">
            <!--首页  -->
            <div class="page">
                <div class="page_header">
                    <img src="/device/images/page_header.png" />
                </div>
                <div class="page_body">
                    <div style="height: 40px"></div>
                    <div style="text-align: center; display: flex; justify-content: center">
                        <img
                            style="max-width: 605px; width: 92%"
                            src="/device/images/gt_title.png"
                        />
                    </div>
                    <div
                        style="
                            margin-top: 40px !important;
                            border-radius: 10px;
                            background: #fff8f0;
                            width: 90%;
                            max-width: 656px;
                            margin: 0 auto;
                        "
                    >
                        <img style="width: 240px" src="/device/images/gt_first_title.png" />
                        <div style="padding: 30px; font-size: 14px">
                            <p>
                                <span
                                    style="
                                        font-size: 22px;
                                        font-weight: bold;
                                        font-style: oblique;
                                        color: #fa9f49;
                                    "
                                    >感觉统合</span
                                >
                                能力是指机体在环境内‌有效利用自己的感官，从环境中获得不同感觉通路的信息，并输入大脑，大脑再对这些信息进行加工处理，并作出适应性反应的能力‌。它是儿童一切能力发展的基础，包括触觉、听觉、视觉、味觉、嗅觉以及前庭和本体感觉等。这些感觉信息的整合，是儿童学习、运动、社交和情感发展的关键‌。
                            </p>
                            <p>
                                感觉统合能力的发展对于儿童来说至关重要。儿童感觉统合能力的不同水平对其日常生活、学习和社交等方面都有显著影响，一个感统能力良好的儿童，能够更好地集中注意力，更快地掌握新知识，更有效地与他人沟通‌。因此家长和教育工作者应密切关注儿童的感觉统合发展，及时识别并干预可能存在的问题，并通过不断的练习和体验来发展和完善，以促进儿童的全面发展。
                            </p>
                        </div>
                    </div>
                    <div
                        style="
                            margin-top: 30px !important;
                            border-radius: 10px;
                            background: #fff8f0;
                            width: 90%;
                            max-width: 656px;
                            margin: 0 auto;
                        "
                    >
                        <div style="padding: 30px; font-size: 14px">
                            <table style="width: 100%">
                                <tr>
                                    <td class="tableTitle">儿童姓名</td>
                                    <td
                                        ><span id="name">{{ currentRow.name }}</span></td
                                    >
                                </tr>
                                <tr>
                                    <td class="tableTitle">儿童性别</td>
                                    <td
                                        ><span id="sex">{{ currentRow.sex }}</span></td
                                    >
                                </tr>
                                <tr>
                                    <td class="tableTitle">测试年龄</td>
                                    <td
                                        ><span id="age">{{ currentRow.age }}</span></td
                                    >
                                </tr>
                                <tr>
                                    <td class="tableTitle">评估中心</td>
                                    <td
                                        ><span id="orgName">{{ currentRow.orgName }}</span></td
                                    >
                                </tr>
                                <tr>
                                    <td class="tableTitle">评估老师</td>
                                    <td
                                        ><span id="teacher">{{ currentRow.teacher }}</span></td
                                    >
                                </tr>
                                <tr>
                                    <td class="tableTitle">评估时间</td>
                                    <td
                                        ><span id="testDate">{{ currentRow.recordDate }}</span></td
                                    >
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="body_footer">感统能力，孩子全面发展的基石</div>
                <div class="page_footer">
                    <img src="/device/images/page_footer.png" />
                </div>
            </div>
            <!-- 整体页 -->
            <div class="page">
                <div class="page_header">
                    <img src="/device/images/page_header.png" />
                </div>
                <div class="page_body">
                    <div class="body_bg" style="width: 100%; height: 100%">
                        <div
                            ><img
                                style="max-width: 380px; width: 60%; margin: 40px"
                                src="/device/images/h0_title.png"
                            />
                        </div>
                        <div class="pageItem" style="margin-left: 50px"><i></i>感统指标分布图</div>
                        <div class="Distribution">
                            <div id="profileChart" style="height: 220px; width: 220px"></div>
                            <div class="wholeTable" style="width: 200px">
                                <table>
                                    <tr>
                                        <td class="itemName">前庭平衡觉</td>
                                        <td
                                            class="level1Name"
                                            :style="{ color: itemColor[currentRow.level1] }"
                                        >
                                            {{ currentRow.level1Name }}
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="itemName">本体觉</td>
                                        <td
                                            class="leve2Name"
                                            :style="{ color: itemColor[currentRow.level2] }"
                                        >
                                            {{ currentRow.level2Name }}
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="itemName">触觉</td>
                                        <td
                                            class="level3Name"
                                            :style="{ color: itemColor[currentRow.level3] }"
                                        >
                                            {{ currentRow.level3Name }}
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                        <div
                            style="
                                margin-top: 40px;
                                display: flex;
                                flex-direction: row;
                                justify-content: flex-end;
                                padding-right: 27px;
                            "
                        >
                            <div class="wholeInfo">
                                <table>
                                    <tr style="font-weight: bold; background-color: #edebe8">
                                        <td style="width: 60px">指标</td>
                                        <td style="width: 60px">等级</td>
                                        <td>说明</td>
                                    </tr>
                                    <tr>
                                        <td>1</td>
                                        <td>较差</td>
                                        <td style="text-align: left">
                                            <p
                                                >大脑在处理感觉信息时存在明显困难，导致在多个方面表现出明显的障碍。表现如下：</p
                                            >
                                            <p
                                                >1.组织协调能力差，思维和动作难以统一，常出现动作笨拙、不协调的情况。</p
                                            >
                                            <p
                                                >2.对外界环境刺激反应迟钝或过度敏感，如无法感知高温或快速移动的游戏等。</p
                                            >
                                            <p
                                                >3.学习困难，尤其在需要综合运用多种感官信息的科目上表现尤为明显。</p
                                            >
                                            <p
                                                >4.情绪不稳定，易怒、焦虑或过度活跃，社交能力受限，难与人正常沟通。</p
                                            >
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>2</td>
                                        <td>一般</td>
                                        <td style="text-align: left">
                                            <p
                                                >在处理感觉信息时可能存在一些困难，尤其面对复杂或快速变化环境时。表现如下：</p
                                            >
                                            <p
                                                >1.动作协调性和组织能力一般，有时会出现动作不协调或反应迟钝的情况。</p
                                            >
                                            <p
                                                >2.对外界环境的感知能力有限，可能需要更多的时间来适应新环境或新刺激。</p
                                            >
                                            <p
                                                >3.学习能力一般，需要更多的练习和重复来掌握新知识。</p
                                            >
                                            <p
                                                >4.情绪可能较波动，社交能力有待提升，但在熟悉环境中能与人正常交流。</p
                                            >
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>3</td>
                                        <td>良好</td>
                                        <td style="text-align: left">
                                            <p
                                                >大脑可较好地处理感觉信息，但对复杂或新颖的刺激可能需稍长时间适应和反应。表现如下：</p
                                            >
                                            <p
                                                >1.基本能协调自身动作行为，但在某些特定情境下可能稍显笨拙。</p
                                            >
                                            <p
                                                >2.对外界环境有一定的感知能力，但在某些细节上可能不够敏感。</p
                                            >
                                            <p
                                                >3.学习能力较强，但需要一定的引导和帮助来掌握新知识。</p
                                            >
                                            <p
                                                >4.情绪相对稳定，社交能力良好，但可能在某些社交场合表现轻微羞涩或不安。</p
                                            >
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>4</td>
                                        <td>优秀</td>
                                        <td style="text-align: left">
                                            <p
                                                >大脑可高效组织处理感官刺激，并迅速做出准确、有效的反应。表现如下：</p
                                            >
                                            <p>1.组织协调能力强，思维和动作高度统一。</p>
                                            <p
                                                >2.对温度、声音等外界环境刺激敏锐且适应能力强，可迅速感知并作出调整。</p
                                            >
                                            <p>3.注意力集中，学习能力强，能迅速掌握新知识。</p>
                                            <p>4.情绪稳定，社交能力强，能够与人良好沟通。</p>
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                        <!-- <div class="pageItem" style="margin-left: 50px"><i></i>建议训练项目</div>
                        <div class="courseTable">
                            <table style="width: 100%">
                                <tr>
                                    <td
                                        style="
                                            background-color: #fa9f49;
                                            text-align: center;
                                            width: 80px;
                                        "
                                        >专注力</td
                                    >
                                    <td id="courseName"></td>
                                </tr>
                                <tr>
                                    <td style="background-color: #fa9f49; text-align: center"
                                        >感统</td
                                    >
                                    <td>直梯大滑板，羊角球，趴地推球，拍篮球，套圈 等...</td>
                                </tr>
                                <tr style="display: none">
                                    <td style="background-color: #fa9f49; text-align: center"
                                        >建议课时</td
                                    >
                                    <td id="courseHour"></td>
                                </tr>
                            </table>
                        </div> -->
                    </div>
                </div>
                <div class="body_footer">感统能力，孩子全面发展的基石</div>
                <div class="page_footer">
                    <img src="/device/images/page_footer.png" />
                </div>
            </div>
            <!-- 前庭平衡觉 -->
            <div class="page-break-before page">
                <div class="page_header">
                    <img src="/device/images/page_header.png" />
                </div>
                <div class="page_body">
                    <div class="page_padding">
                        <di class="subItem_title">
                            <span>前庭平衡觉-评估结果：</span>
                            <span :style="{ color: itemColor[currentRow.level1] }">
                                {{ currentRow.level1Name }}</span
                            >
                        </di>
                        <div style="display: flex; flex-direction: row; margin-top: 25px">
                            <div class="title_bg">
                                <table class="resultTable">
                                    <!-- <tr>
                                        <td id="hearingName0">测试项目</td>
                                        <td id="hearingName0">测试内容</td>
                                        <td class="result_score">测试分数</td>
                                        <td class="hearingStar0"></td>
                                        <td id="levelName0"></td>
                                    </tr> -->
                                    <tr>
                                        <td id="hearingName0">静态平衡</td>
                                        <td id="hearingName0">金鸡独立</td>
                                        <td class="result_score">{{ currentRow.score1 }}分</td>
                                        <td class="hearingStar0"></td>
                                        <td id="levelName0"></td>
                                    </tr>
                                    <tr>
                                        <td id="hearingName0">动态平衡</td>
                                        <td id="hearingName0">走平衡木</td>
                                        <td class="result_score" id="hearingScore0"
                                            >{{ currentRow.score2 }}分</td
                                        >
                                        <td class="hearingStar0"></td>
                                        <td id="levelName0"></td>
                                    </tr>
                                    <tr>
                                        <td id="hearingName0">旋转测试</td>
                                        <td id="hearingName0">旋转椅</td>
                                        <td class="result_score" id="hearingScore0"
                                            >{{ currentRow.score3 }}分</td
                                        >
                                        <td class="hearingStar0"></td>
                                        <td id="levelName0"></td>
                                    </tr>
                                </table>
                            </div>
                        </div>

                        <div style="margin: 10px 0px"
                            ><img style="width: 100%" src="/device/images/split_line.png" />
                        </div>

                        <div class="hearing_info">
                            <p>
                                <span class="bigText">前庭平衡觉</span>
                                指利用内耳的三对半规管及耳石（碳酸钙结晶体）探测地心引力并控制头部在活动中的方位，以保持身体的平衡的感觉‌。它是人体感觉系统的重要组成部分，负责感受人体的平衡和运动状态，与本体感觉和视觉协同工作，共同维持身体的平衡。
                            </p>
                        </div>
                        <div
                            style="
                                width: 400px;
                                height: 400px;
                                margin: 0 auto;
                                display: flex;
                                justify-content: center;
                            "
                            id="typeChart1"
                        >
                        </div>
                    </div>
                </div>
                <div class="body_footer">感统能力，孩子全面发展的基石</div>
                <div class="page_footer">
                    <img src="/device/images/page_footer.png" />
                </div>
            </div>
            <!-- 前庭平衡觉-表现 -->
            <div class="page">
                <div class="page_header">
                    <img src="/device/images/page_header.png" />
                </div>
                <div class="page_body">
                    <div class="body_bg">
                        <div class="page_padding subItem_padding">
                            <div>
                                <div class="subItem_title"> 前庭平衡觉-日常表现 </div>
                                <!-- <div class="pageBox">
                                    <div class="pageItem_Title">听觉广度</div>
                                    <p class="pageItem_content">
                                        听觉广度指的是个体同时接收和处理多元音频信息的能力。在上学听课环境中，学生应具备一定的听觉广度，以便对老师的主讲、同时发生的同学提问或讨论等多源信息进行有效接收和理解，以丰富知识视角，更深入地理解和学习课题内容。但过大的听觉广度可能导致注意力分散，建议适度控制。
                                    </p>
                                </div> -->
                                <!-- <div>
                                    <div class="scoreBox">
                                        <span style="color: #fa9f49">当前分数</span>
                                        <span style="font-size: 50px" id="item0"></span>
                                        <span class="itemLevelName0"></span>
                                    </div>
                                </div> -->
                                <div class="happy"><i></i>前庭平衡觉好的表现</div>
                                <p> ‌1. 位置稳定，无眩晕等症状；</p>
                                <p
                                    >‌2.
                                    平衡能力强，不易摔倒或跌倒，在各种运动状态下能够轻松保持平衡；
                                </p>
                                <p>
                                    3.手眼动作协调，能够迅速准确地完成各种精细动作，运动技能发展良好； </p
                                ><p>
                                    4.
                                    空间感知能力强，能够轻松进行各种需要空间定位的活动，如上下楼梯、穿越障碍物等‌； </p
                                ><p>
                                    ‌5.
                                    与视觉协同工作好，在各种运动时能够保持清晰的视觉，不会因为身体的晃动而影响视线或产生模糊感，‌保持视觉清晰与稳定。
                                </p>
                                <div class="sadness"><i></i>前庭平衡觉弱的表现</div>
                                <p>
                                    表现：可能会导致眩晕、平衡感弱、眼球震颤、空间定位障碍、身体协调性差等症状或问题，甚至影响语言和行动能力。
                                </p>
                                <p>场景例举：</p>
                                <p
                                    >1.行走时，可能会频繁摔倒或需要借助外力才能保持平衡，尤其是在不平坦的路面或拥挤的公共场所；</p
                                >
                                <p
                                    >2.‌乘坐交通工具时，由于车辆的晃动和加速减速，可能会感到更加不适，甚至出现严重的眩晕和恶心症状；</p
                                >
                                <p
                                    >3.‌进行体育活动时，如篮球、足球、舞蹈等，可能会表现出明显的动作不协调和平衡能力下降；</p
                                >
                                <p
                                    >4.‌在黑暗环境中，由于缺乏视觉辅助，可能会更加容易迷失方向或撞到障碍物‌。</p
                                >
                            </div>
                        </div>
                    </div>
                </div>
                <div class="body_footer">感统能力，孩子全面发展的基石</div>
                <div class="page_footer">
                    <img src="/device/images/page_footer.png" />
                </div>
            </div>
            <!-- 本体觉 -->
            <div class="page-break-before page">
                <div class="page_header">
                    <img src="/device/images/page_header.png" />
                </div>
                <div class="page_body">
                    <div class="page_padding">
                        <di class="subItem_title">
                            <span>本体觉-评估结果：</span>
                            <span :style="{ color: itemColor[currentRow.level2] }">
                                {{ currentRow.level2Name }}</span
                            >
                        </di>
                        <div style="display: flex; flex-direction: row; margin-top: 25px">
                            <div class="title_bg">
                                <table class="resultTable">
                                    <!-- <tr>
                                        <td id="hearingName0">测试项目</td>
                                        <td id="hearingName0">测试内容</td>
                                        <td class="result_score">测试分数</td>
                                        <td class="hearingStar0"></td>
                                        <td id="levelName0"></td>
                                    </tr> -->
                                    <tr>
                                        <td id="hearingName0">关节位置觉</td>
                                        <td id="hearingName0">闭眼指出身体部位</td>
                                        <td class="result_score">{{ currentRow.score4 }}分</td>
                                        <td class="hearingStar0"></td>
                                        <td id="levelName0"></td>
                                    </tr>
                                    <tr>
                                        <td id="hearingName0">运动协调</td>
                                        <td id="hearingName0">拍球</td>
                                        <td class="result_score" id="hearingScore0"
                                            >{{ currentRow.score5 }}分</td
                                        >
                                        <td class="hearingStar0"></td>
                                        <td id="levelName0"></td>
                                    </tr>
                                    <tr>
                                        <td id="hearingName0">肌肉力量</td>
                                        <td id="hearingName0">基本深蹲</td>
                                        <td class="result_score" id="hearingScore0"
                                            >{{ currentRow.score6 }}分</td
                                        >
                                        <td class="hearingStar0"></td>
                                        <td id="levelName0"></td>
                                    </tr>
                                </table>
                            </div>
                        </div>

                        <div style="margin: 10px 0px"
                            ><img style="width: 100%" src="/device/images/split_line.png" />
                        </div>

                        <div class="hearing_info">
                            <p>
                                <span class="bigText">本体觉</span>
                                指人体器官和机能的本体感受器，能够感受到自身和外界环境的变化，并作出相应的反应‌。本体觉又叫动作觉，是指身体本身的感觉，通过接收身体在不同位置时肌肉、肌腱的收缩或舒张，以及关节的挤压信号，以此来计算调节肢体位置及肢体动作的速度与方向，也包括决定抓握或举起物体所需力量的感觉‌。本体觉可以帮助我们感知身体位置，维持躯体姿势、表情、音调等，进行动作计划以及躯体的协调等‌。
                            </p>
                        </div>
                        <div
                            style="
                                width: 400px;
                                height: 400px;
                                margin: 0 auto;
                                display: flex;
                                justify-content: center;
                            "
                            id="typeChart2"
                        >
                        </div>
                    </div>
                </div>
                <div class="body_footer">感统能力，孩子全面发展的基石</div>
                <div class="page_footer">
                    <img src="/device/images/page_footer.png" />
                </div>
            </div>
            <!-- 本体觉-表现 -->
            <div class="page">
                <div class="page_header">
                    <img src="/device/images/page_header.png" />
                </div>
                <div class="page_body">
                    <div class="body_bg">
                        <div class="page_padding subItem_padding">
                            <div>
                                <div class="subItem_title"> 本体觉-日常表现 </div>
                                <!-- <div class="pageBox">
                                    <div class="pageItem_Title">听觉广度</div>
                                    <p class="pageItem_content">
                                        听觉广度指的是个体同时接收和处理多元音频信息的能力。在上学听课环境中，学生应具备一定的听觉广度，以便对老师的主讲、同时发生的同学提问或讨论等多源信息进行有效接收和理解，以丰富知识视角，更深入地理解和学习课题内容。但过大的听觉广度可能导致注意力分散，建议适度控制。
                                    </p>
                                </div> -->
                                <!-- <div>
                                    <div class="scoreBox">
                                        <span style="color: #fa9f49">当前分数</span>
                                        <span style="font-size: 50px" id="item0"></span>
                                        <span class="itemLevelName0"></span>
                                    </div>
                                </div> -->
                                <div class="happy"><i></i>本体觉好的表现</div>
                                <p>
                                    1.‌动作协调与身体控制能力强‌，能够熟练地进行各种精细动作，在复杂动作中能够提前在大脑里规划好动作，使动作稳稳当当、顺顺利利；
                                </p>
                                <p>
                                    2.‌平衡能力强，能够轻松地单脚站立较长时间，在运动和日常生活中保持稳定，减少摔倒的风险；
                                </p>
                                <p>
                                    3.‌良好的身体感知，能够清楚知道自己身体每个部位的位置和运动状态；
                                </p>
                                <p>
                                    4.‌自信心强‌，愿意尝试更多新的活动和挑战，有更强的信任感，面对困难时具备自信心和坚持力‌。
                                </p>
                                <div class="sadness"><i></i>本体觉弱的表现</div>
                                <p
                                    >表现：包括动作协调能力差、表达沟通能力弱、力量控制能力不佳、空间感知能力弱以及平衡障碍等。这些表现会在日常生活、学习和运动等不同场景中有所体现，严重影响患者的生活质量和学习效率。</p
                                >
                                <p>场景体现：</p>
                                <p
                                    >1.‌在日常生活中，可能会因为动作协调能力差而显得笨拙，如扣纽扣困难、拿筷子不稳等‌。同时可能会因为空间感知能力弱而经常碰倒东西或迷路；</p
                                >
                                <p
                                    >2.在学习环境中，可能会因为表达沟通能力弱而难以与老师或同学有效交流。亦可能会因为手眼协调能力差而写字费力、抄错笔记等，从而影响学习效果；</p
                                >
                                <p
                                    >3.在运动场景中，可能会因为动作协调能力差而难以完成复杂的运动动作，如跑步时容易摔倒、打球时难以控制球的方向等‌。同时也饿可能会因为平衡障碍而难以保持稳定的站立或行走姿势。</p
                                >
                            </div>
                        </div>
                    </div>
                </div>
                <div class="body_footer">感统能力，孩子全面发展的基石</div>
                <div class="page_footer">
                    <img src="/device/images/page_footer.png" />
                </div>
            </div>
            <!-- 触觉 -->
            <div class="page-break-before page">
                <div class="page_header">
                    <img src="/device/images/page_header.png" />
                </div>
                <div class="page_body">
                    <div class="page_padding">
                        <di class="subItem_title">
                            <span>触觉-评估结果：</span>
                            <span :style="{ color: itemColor[currentRow.level3] }">
                                {{ currentRow.level3Name }}</span
                            >
                        </di>
                        <div style="display: flex; flex-direction: row; margin-top: 25px">
                            <div class="title_bg">
                                <table class="resultTable">
                                    <!-- <tr>
                                        <td id="hearingName0">测试项目</td>
                                        <td id="hearingName0">测试内容</td>
                                        <td class="result_score">测试分数</td>
                                        <td class="hearingStar0"></td>
                                        <td id="levelName0"></td>
                                    </tr> -->
                                    <tr>
                                        <td id="hearingName0">触觉敏感度</td>
                                        <td id="hearingName0">使用不同材质的物品触摸儿童皮肤</td>
                                        <td class="result_score">{{ currentRow.score7 }}分</td>
                                        <td class="hearingStar0"></td>
                                        <td id="levelName0"></td>
                                    </tr>
                                    <tr>
                                        <td id="hearingName0">触觉辨别能力</td>
                                        <td id="hearingName0">闭眼识别不同形状的物品</td>
                                        <td class="result_score" id="hearingScore0"
                                            >{{ currentRow.score8 }}分</td
                                        >
                                        <td class="hearingStar0"></td>
                                        <td id="levelName0"></td>
                                    </tr>
                                    <tr>
                                        <td id="hearingName0">触觉适应性</td>
                                        <td id="hearingName0">让儿童接触不同温度的水</td>
                                        <td class="result_score" id="hearingScore0">
                                            {{ currentRow.score9 }}分
                                        </td>
                                        <td class="hearingStar0"></td>
                                        <td id="levelName0"></td>
                                    </tr>
                                </table>
                            </div>
                        </div>

                        <div style="margin: 10px 0px"
                            ><img style="width: 100%" src="/device/images/split_line.png" />
                        </div>

                        <div class="hearing_info">
                            <p>
                                <span class="bigText">触觉</span>
                                指体表受到触摸、压力等机械刺激时产生的感觉‌。它是通过皮肤上的触觉感受器来接收和传递这些刺激的。触觉感受器在皮肤表面散布，触点大小不尽相同且分布不规则，其中指腹的触点最多，因此指腹的触觉最为灵敏，而背部和小腿的触觉则相对迟钝‌。触觉是人类最早感受到关怀、被爱及安全感的一种感觉，对于个体的脑发育和全面品质有着重要影响‌。
                            </p>
                        </div>
                        <div
                            style="
                                width: 400px;
                                height: 400px;
                                margin: 0 auto;
                                display: flex;
                                justify-content: center;
                            "
                            id="typeChart3"
                        >
                        </div>
                    </div>
                </div>
                <div class="body_footer">感统能力，孩子全面发展的基石</div>
                <div class="page_footer">
                    <img src="/device/images/page_footer.png" />
                </div>
            </div>
            <!-- 触觉-表现 -->
            <div class="page">
                <div class="page_header">
                    <img src="/device/images/page_header.png" />
                </div>
                <div class="page_body">
                    <div class="body_bg">
                        <div class="page_padding subItem_padding">
                            <div>
                                <div class="subItem_title"> 触觉-日常表现 </div>
                                <!-- <div class="pageBox">
                                    <div class="pageItem_Title">听觉广度</div>
                                    <p class="pageItem_content">
                                        听觉广度指的是个体同时接收和处理多元音频信息的能力。在上学听课环境中，学生应具备一定的听觉广度，以便对老师的主讲、同时发生的同学提问或讨论等多源信息进行有效接收和理解，以丰富知识视角，更深入地理解和学习课题内容。但过大的听觉广度可能导致注意力分散，建议适度控制。
                                    </p>
                                </div> -->
                                <!-- <div>
                                    <div class="scoreBox">
                                        <span style="color: #fa9f49">当前分数</span>
                                        <span style="font-size: 50px" id="item0"></span>
                                        <span class="itemLevelName0"></span>
                                    </div>
                                </div> -->
                                <div class="happy"><i></i>触觉好的表现</div>
                                <p
                                    >1.‌触感敏锐‌，能清晰感受外界的冷热、轻触、痛痒等触觉刺激，对不同触感有明确反应；</p
                                >
                                <p
                                    >2.‌适应力强‌，对新环境事物的触觉刺激能较快适应，不会因触觉刺激产生过度抗拒或恐惧；</p
                                >
                                <p>3.‌情绪稳定，不会因触觉刺激产生过度的情绪波动；</p>
                                <p
                                    >4.‌社交能力强，对握手、拥抱等触感不会不适或排斥，有利融入集体，建立良好社交关系；</p
                                >
                                <p
                                    >‌5.动作协调，能准确感知自身位置和运动状态。在活动时表现出更好的灵活性和准确性‌。</p
                                >
                                <div class="sadness"><i></i>触觉弱的表现</div>

                                <p
                                    >表现：主要体现在对触觉刺激的异常反应上，可能表现为过度敏感或反应不足。</p
                                >
                                <p>场景体现：</p>
                                <p
                                    >1.‌对轻微触碰极度不适，拒绝穿某些材质的衣物，或受突然触碰时，表现出惊吓、暴躁、僵直等强烈反应；</p
                                >
                                <p
                                    >2.抵触或抗拒如洗澡、理发等日常涉及皮肤接触的活动，表现不适或痛苦；</p
                                >
                                <p
                                    >3.‌情绪不稳定与社交障碍，可能因对别人的触摸或接近表现出不安、易烦躁、发脾气等不稳定情绪，导致社交隔离；</p
                                >
                                <p
                                    >4.可能存在‌饮食与睡眠问题，对食物质地或口感敏感而挑食或偏食，对床上用品的质地、温度或触感特别敏感，导致难入睡或睡不安稳；</p
                                >
                                <p
                                    >5.‌‌对疼痛或温度变化反应迟钝，在摔倒或受伤时没有明显的痛苦表现，对温度变化不敏感，如不注意衣服是否舒适，对室温不敏感；</p
                                >
                                <p
                                    >6.喜欢用力按压皮肤、被紧紧地抱住或质地坚硬物，以寻求更多触觉刺激；</p
                                >
                                <p
                                    >7.不注意个人卫生，会咬不能吃的东西。喜好如摔跤、攀爬的等需要大量身体接触的活动，但对自身察觉能力不足‌。</p
                                >
                            </div>
                        </div>
                    </div>
                </div>
                <div class="body_footer">感统能力，孩子全面发展的基石</div>
                <div class="page_footer">
                    <img src="/device/images/page_footer.png" />
                </div>
            </div>
        </div>
    </div>
</template>
<style scoped lang="less"></style>
